<template>
  <el-space v-if="empName && empName.length > 0">
    <span v-for="i in empName" :key="i">{{ i }}</span>
  </el-space>
</template>

<script>
import { getName, getNames } from '@/api/emp/emp'
export default {
  components: {},
  props: {
    empId: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      default: null
    }
  },
  data() {
    return {
      empName: null
    }
  },
  watch: {
    empId: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.empName = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      if (this.empId == null || this.empId.length === 0) {
        this.empName = null
      } else if (Array.isArray(this.empId)) {
        const res = await getNames(this.empId)
        this.empName = this.empId.map((c) => res[c])
      } else {
        const res = await getName(this.empId)
        if (res) {
          this.empName = [res]
        } else {
          this.empName = null
        }
      }
    }
  }
}
</script>
